<template>
  <div class="center-top">
    <el-row type="flex" justify="space-between">
      <el-col :span="8">
        <!-- 左边区域 -->
        <div class="left">
          <el-carousel :interval="5000" arrow="always" height="400px">
            <el-carousel-item v-for="(item, index) in left_carousel" :key="index">
              <img
                :src="item.url"
                style="width: 400px; height: 400px; border-radius: 10px"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- 中间区域 -->
        <div class="cen">
          <div class="describe-warp">
            <!-- <span class="describe">树莓派4B3B+Raspberry Pi4 8GB传感器开发板创客教育学习开源套件</span> -->
            <span class="describe">{{ goodsDeatil.name }}</span>
          </div>

          <table class="price-warp" bgcolor="#FFF2E8" width="100%">
            <tr>
              <td>
                <div class="text" align="right" width="100px">价格：</div>
              </td>
              <td>
                <!-- <span class="original-price">¥265.00</span> -->
                <span class="original-price">￥ {{ goodsDeatil.price / 0.8 }} 元</span>
              </td>
            </tr>
            <tr>
              <td>
                <div class="text" align="right" width="100px">商城价：</div>
              </td>
              <td>
                <span class="selling-price">¥{{ goodsDeatil.price }}</span>
              </td>
            </tr>
          </table>

          <table width="100%" style="margin-top: 20px">
            <tr>
              <td>
                <div class="text" align="right" width="200px">商品类型：</div>
              </td>
              <td><input type="radio" value="默认类型" checked /> 默认类型</td>
            </tr>
          </table>

          <table width="100%" class="count-warp">
            <tr>
              <td align="right">数量：</td>
              <td align="left">
                <el-input-number
                  v-model="goods_num"
                  @change="handleGoodsNumberChange"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </td>
            </tr>
          </table>
          <div class="button-warp">
            <el-button type="warning" @click="buyItNow()">立即购买</el-button>
            <el-button type="danger" @click="addToShoppingCart()">加入购物车</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <!-- 右边区域 -->
        <div class="right"></div>
      </el-col>
    </el-row>

    <!-- 立即购买 ==> 对话框 -->
    <el-dialog title="立即购买" :visible.sync="dialogBuyItNowIsVisible" width="450px">
      <el-form ref="buyItNowForm" v-model="buyItNowForm" label-width="auto" size="mini">
        <el-form-item label="商品总价:">
          <span class="totalPrice">￥ {{ buyItNowForm.totalPrice }} 元</span>
        </el-form-item>
        <el-form-item label="请选择付款方式:" prop="paymentOption">
          <el-select placeholder="请选择付款方式" v-model="buyItNowForm.paymentOption">
            <el-option
              v-for="(item, index) in paymentOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="buyItNowCancel()">取消</el-button>
          <el-button type="danger" @click="buyItNowConfirm()">立即购买</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 微信支付对话框 -->
    <el-dialog
      class="paymentDialog"
      title="微信支付"
      :visible.sync="weiXinPaymentDialogIsVisble"
      width="30%"
    >
      <el-form v-model="buyItNowForm" label-width="auto" size="mini">
        <el-form-item label="商品总价:">
          <span class="totalPrice">￥ {{ buyItNowForm.totalPrice }} 元</span>
        </el-form-item>
        <el-form-item label="请扫码支付:" prop="img">
          <img src="../../../assets/image_payment/weixin.png" class="paymentImage" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="weiXinPaymentDialogIsVisble = false">取 消</el-button>
        <el-button type="primary" @click="weiXinPaymentDialogIsVisble = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 支付宝支付对话框 -->
    <el-dialog
      class="paymentDialog"
      title="支付宝支付"
      :visible.sync="zhiFuBaoPaymentDialogIsVisble"
      width="30%"
    >
      <el-form v-model="buyItNowForm" label-width="auto" size="mini">
        <el-form-item label="商品总价:">
          <span class="totalPrice">￥ {{ buyItNowForm.totalPrice }} 元</span>
        </el-form-item>
        <el-form-item label="请扫码支付:" prop="img">
          <img src="../../../assets/image_payment/zhifubao.jpg" class="paymentImage" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="zhiFuBaoPaymentDialogIsVisble = false">取 消</el-button>
        <el-button type="primary" @click="zhiFuBaoPaymentDialogIsVisble = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addGoodsItemToCurrentUserShoopingCart } from "../../../api/ShoppingCart/index.js";
export default {
  props: {
    //  父组件传来的值
    imageList: {
      type: Array,
      default: [],
    },
    goodsDeatil: {
      type: Object,
      default: {},
    },
  },
  created() {
    //  将父组件传来的数据赋值给当前页面的轮播图
    this.left_carousel = this.imageList;

    //  获取 sessionStorage 中存储的 用户的信息（userInfo）
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  },
  data() {
    return {
      paymentImageUrl: "../../../assets/image_payment/weixin.png",
      weiXinPaymentDialogIsVisble: false,
      zhiFuBaoPaymentDialogIsVisble: false,
      goods_num: 1,
      dialogBuyItNowIsVisible: false, //  是否显示立即购买页面
      userInfo: "", //  当前用户的信息
      buyItNowForm: {
        totalPrice: 0,
        paymentOption: "weixin",
      },
      left_carousel: [
        {
          url:
            "https://gd4.alicdn.com/imgextra/i1/858678531/O1CN01wepV0F2CtFSbeh73B_!!858678531.jpg_400x400.jpg",
        },
        {
          url:
            "https://gd4.alicdn.com/imgextra/i4/858678531/O1CN01KqeNNk2CtFQrHHOns_!!858678531.jpg_400x400.jpg",
        },
        {
          url:
            "https://gd4.alicdn.com/imgextra/i4/858678531/O1CN01UQAMoy2CtFShyA6th_!!858678531.jpg_400x400.jpg",
        },
        {
          url:
            "https://gd2.alicdn.com/imgextra/i2/858678531/O1CN01VyNaKK2CtFRLnJCia_!!858678531.jpg_400x400.jpg",
        },
        {
          url:
            "https://gd2.alicdn.com/imgextra/i2/858678531/O1CN01Z8kWt02CtFPChpTkD_!!858678531.jpg_400x400.jpg",
        },
      ],
      centerForm: {},
      paymentOptions: [
        { label: "微信", value: "weixin" },
        { label: "支付宝", value: "zhifubao" },
      ],
    };
  },
  methods: {
    handleGoodsNumberChange(value) {
      //  商品数量改变触发
      //  console.log(this.goods_num);
      if (this.goods_num == 10) {
        //    达到最大购买数量
        this.$notify({
          /* 指定消息的标题 */
          title: "修改商品数量",
          /* 指定消息的内容 */
          message: "已经是最大购买的数量了哦！",
          /* 指定消息出现的位置 */
          position: "top-right",
          /* 指定消息的类型 */
          type: "warning",
          /* 持续两秒钟 */
          duration: 2 * 1000,
        });
      } else if (this.goods_num == 1) {
        //  达到最小购买数量
        this.$notify({
          /* 指定消息的标题 */
          title: "修改商品数量",
          /* 指定消息的内容 */
          message: "已经是最小购买的数量了哦！ ",
          /* 指定消息出现的位置 */
          position: "top-right",
          /* 指定消息的类型 */
          type: "warning",
          /* 持续两秒钟 */
          duration: 2 * 1000,
        });
      }
    },
    /**
     * 立即购买 点击时触发
     *
     *  1. 弹出立即购买的对话框
     *      1.1 弹出的对话框中包含的数据有：商品的基本信息（商品名、图片、单价）、购买的数量、应支付的费用（总价）
     *      1.2 包含立即购买和取消两个按钮
     * 2. 如果点击立即购买 ==> 提示选择付款方式 ==> 按照用户选择的付款方式弹出不同的收款码，并且提示应该支付的费用
     * 3. 3s 之后提示购买成功，等待发货。。。
     */
    buyItNow() {
      //  获取商品单价
      let price = this.goodsDeatil.price;

      //  获取商品数量
      let number = this.goods_num;

      //  计算需要支付的总价格
      this.buyItNowForm.totalPrice = price * number;

      //  打开对话框
      this.dialogBuyItNowIsVisible = true;
    },
    /**
     *  添加到购物车 点击时触发
     *  1. 获取商品的唯一标识 ， 主键
     *  2. 将商品主键传入数据库中，添加到指定的用户的购物车中
     *      2.1 如果商品已经在购物车中，提示是否需要跳转到购物车页面
     *      2.2 如果商品还未添加到当前用户的购物车中，将当前选择的商品添加的用户的购物车中
     *  3. 提示添加到购物车成功，并且询问是否跳转到购物车
     *  4. 如果选择跳转到购物车页面 ==> 打开购物车页面显示当前用户的购物车
     */
    async addToShoppingCart() {
      // 1. 从商品详情中获取商品的唯一标识 ， 主键
      const goodsId = this.goodsDeatil.id;

      // 调用后台接口，接收返回的数据(一个 Promise 对象)并进行判断
      // console.log(this.goods_num);
      let res = this.funAddGoodsItemToCurrentUserShoopingCart();
      let t = null;
      await res.then(
        (res) => {
          t = res;
          //  console.log(res);
        },
        (err) => {
          console.log(err);
        }
      );
      if (t == 1) {
        // 2.1 如果商品还未添加到当前用户的购物车中，将当前选择的商品添加的用户的购物车中

        // 3. 提示添加到购物车成功，并且询问是否跳转到购物车
        this.isGoToShoppingCart();
      } else if (t == 0) {
        // 2.2 如果商品已经在购物车中，提示是否需要跳转到购物车页面
        this.isGoToShoppingCart(
          "该商品已经在购物车中，是否需要跳转到购物车页面进行结账？"
        );
      }
    },
    /**
     * 点击立即购买对话框中的 取消按钮 时触发
     */
    buyItNowCancel() {
      this.$notify({
        /* 指定消息的标题 */
        title: "立即购买",
        /* 指定消息的内容 */
        message: "取消立即购买",
        /* 指定消息出现的位置 */
        position: "top-right",
        /* 指定消息的类型 */
        type: "info",
        /* 持续两秒钟 */
        duration: 2 * 1000,
      });
      this.dialogBuyItNowIsVisible = false;
    },
    /**
     * 点击立即购买对话框中的 立即购买按钮 时触发
     *
     *  1. 提示选择付款方式 ==> 按照用户选择的付款方式弹出不同的收款码，并且提示应该支付的费用
     */
    buyItNowConfirm() {
      if (this.buyItNowForm.paymentOption === "weixin") {
        this.weiXinPaymentDialogIsVisble = true;
      } else {
        this.zhiFuBaoPaymentDialogIsVisble = true;
      }
      this.dialogBuyItNowIsVisible = false;
    },
    /**
     *是否跳转到购物车页面
     */
    isGoToShoppingCart(text = "成功添加到购物车，是否需要跳转到购物车页面？") {
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$notify({
            /* 指定消息的标题 */
            title: "跳转到购物车",
            /* 指定消息的内容 */
            message: "正在准备跳转到购物车页面！ ",
            /* 指定消息出现的位置 */
            position: "top-right",
            /* 指定消息的类型 */
            type: "success",
            /* 持续两秒钟 */
            duration: 2 * 1000,
          });
          // 4. 如果选择跳转到购物车页面 ==> 打开购物车页面显示当前用户的购物车
          this.$router.push({
            path: "/shopping_cart",
            query: {
              id: this.userInfo.id,
            },
          });
        })
        .catch(() => {
          this.$notify({
            /* 指定消息的标题 */
            title: "跳转到购物车",
            /* 指定消息的内容 */
            message: "已取消跳转到购物车页面！",
            /* 指定消息出现的位置 */
            position: "top-right",
            /* 指定消息的类型 */
            type: "info",
            /* 持续两秒钟 */
            duration: 2 * 1000,
          });
        });
    },
    /**
     * 默认为添加当前商品到当前用户的购物车，可以修改
     */
    async funAddGoodsItemToCurrentUserShoopingCart(
      data = {
        goodsId: this.goodsDeatil.id,
        goodsNumber: this.goods_num,
        userId: this.userInfo.id,
      }
    ) {
      let result = null;
      await addGoodsItemToCurrentUserShoopingCart(data).then(
        (res) => {
          //  console.log(res);

          //  接收后台返回的标志位，
          //  YES:添加成功; NO:添加失败; -1:该商品已经在购物车中;
          result = res;
        },
        (err) => {
          //  出现错误，输出错误信息
          console.log(err);
        }
      );

      //  判断后台传来的标志位，并作出不同的响应
      if (result === "YES") {
        //  如果添加成功，提示，添加成功
        this.$notify({
          /* 指定消息的标题 */
          title: "添加商品到购物车",
          /* 指定消息的内容 */
          message: "添加商品到购物车成功！",
          /* 指定消息出现的位置 */
          position: "top-right",
          /* 指定消息的类型 */
          type: "success",
          /* 持续两秒钟 */
          duration: 2 * 1000,
        });

        return 1;
      } else if (result === "-1") {
        // 如果已经存在，提示请勿重复添加

        this.$notify({
          /* 指定消息的标题 */
          title: "添加商品到购物车",
          /* 指定消息的内容 */
          message: "该商品已经在购物车中了，请勿重复添加！",
          /* 指定消息出现的位置 */
          position: "top-right",
          /* 指定消息的类型 */
          type: "warning",
          /* 持续两秒钟 */
          duration: 2 * 1000,
        });

        return 0;
      } else {
        //  如果添加失败，提示添加失败，请稍后重试

        this.$notify({
          /* 指定消息的标题 */
          title: "添加商品到购物车",
          /* 指定消息的内容 */
          message: "添加商品到购物车失败，请稍后重试！",
          /* 指定消息出现的位置 */
          position: "top-right",
          /* 指定消息的类型 */
          type: "error",
          /* 持续两秒钟 */
          duration: 2 * 1000,
        });
      }

      return -1;
    },
  },
};
</script>

<style>
.text {
  width: 100px;
}

.count-warp {
  margin: 130px 0px 0px 0px;
}

.button-warp {
  margin: 10px 10%;
}
.totalPrice {
  font-size: 28px;
  color: #ff5000;
}
.paymentImage {
  width: 200px;
}
</style>
